<template>
  <div>
    <!-- el-tree
             data:树形数据
             props:{label:'需要显示的文本字段名',children:'子集字段名'}
             作用域插槽  v-slot="{node,data}"
                node:组件内传入的特别数据值，高级应用时使用
                data：当前行数据

     -->
    <el-tree :data="data" :props="{label:'name',children:'child'}">
      <template v-slot="{node, data}">
        <div class="item" style="width:100%;">
          <div class="left">{{ data.name }}</div>
          <div class="right-1" @click="btnClick(node, data)">管理员</div>
          <div class="right-2">操作</div>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [{
        name: '一级 1',
        child: [{
          name: '二级 1-1',
          child: [{
            name: '三级 1-1-1'
          }]
        }]
      }, {
        name: '一级 2',
        child: [{
          name: '二级 2-1',
          child: [{
            name: '三级 2-1-1'
          }]
        }, {
          name: '二级 2-2',
          child: [{
            name: '三级 2-2-1'
          }]
        }]
      }, {
        name: '一级 3',
        child: [{
          name: '二级 3-1',
          child: [{
            name: '三级 3-1-1'
          }]
        }, {
          name: '二级 3-2',
          child: [{
            name: '三级 3-2-1'
          }]
        }]
      }]
    }
  },
  methods: {
    btnClick(node, data) {
      console.log(node, data)
    }
  }
}
</script>
<style lang='scss' scoped>
.item{
  display: flex;
  .left{
    flex:1
  }

}
</style>
